﻿$(function () {
    const { ref, reactive, computed } = Vue;
    const app = Vue.createApp({
        setup() {
            const checkUsername = (rule, value, callbcak) => {
                if (value === '') {
                    callbcak(new Error('请输入您的昵称'));
                } else if (/^[0-9]*$/g.test(value)) {
                    callbcak(new Error('昵称不能为纯数字'));
                } else {
                    callbcak()
                }
            }

            const ruleFormRef = ref();

            const state = reactive({
                loginType: 'employer',
                username: '',
                password: '',
                phone: '',
                num: '86',
                phoneCode: '',
                showCodeInput: false
            })
            const urlFrom = utils.getQueryVariable('from');

            if (urlFrom) {
                state.loginType = urlFrom;
            }

            const checkPhone = (rule, value, callbcak) => {
                if (value === '') {
                    callbcak(new Error('请输入您的手机号码'));
                } else if (!(/^[1][3,4,5,7,8][0-9]{9}$/g.test(value))) {
                    callbcak(new Error('请输入正确的手机号码'));
                } else if (value === '13144889361') {
                    state.showCodeInput = false;
                    callbcak(new Error('手机号码已被使用'));
                } else {
                    state.showCodeInput = true;
                    callbcak()
                }
            }

            const codeConfig = reactive({
                text: '获取验证码',
                countDown: 60,
                disabled: false
            })

            const rules = reactive({
                username: [
                    { validator: checkUsername, trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入您的登录密码', trigger: 'blur' },
                    { min: 6, message: '登录密码最少为6位', trigger: 'blur' }
                ],
                phone: [
                    { validator: checkPhone, trigger: 'blur' }
                ],
                phoneCode: [
                    { required: true, message: '请输入手机验证码', trigger: 'blur' },
                    { min: 6, message: '验证码应为6位数字', trigger: 'blur' }
                ],
            })

            const getCodeBtnOnClick = () => {
                // code get code
                codeConfig.disabled = true;
                let timeCount = codeConfig.countDown;
                const countDown = () => {
                    setTimeout(() => {
                        timeCount--;
                        codeConfig.text = `再次发送(${timeCount})`;
                        if (timeCount <= 0) {
                            codeConfig.text = '获取验证码';
                            codeConfig.disabled = false;
                        } else {
                            countDown()
                        }
                    }, 1000)
                }
                countDown()
            }

            const subitForm = ((formEl) => {
                if (!formEl) return;
                formEl.validate((valid) => {
                    if (valid) {
                        console.log('submit!')
                    } else {
                        console.log('error submit!')
                        return false
                    }
                })
            })

            return {
                state,
                rules,
                codeConfig,
                ruleFormRef,
                getCodeBtnOnClick,
                subitForm
            };
        }
    });
    const { ElTabs, ElForm, ElFormItem, ElInput, ElButton, ElSelect, ElOption } = ElementPlus;
    app.use(ElTabs);
    app.use(ElForm);
    app.use(ElFormItem);
    app.use(ElInput);
    app.use(ElButton);
    app.use(ElSelect);
    app.use(ElOption);
    app.mount('#main-container');
})